<template>
  <div>
    <!-- <h1>基本案例</h1> -->
    <div ref="con" class="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //封装一个初始化图表
    initChart() {
      //创建初始化
      let myChart = this.$echarts.init(this.$refs.con);
      //配置对象
      let options = {
        title: {
          text: "主标题",
          textStyle: {
            fontSize: "40px",
            color: "blue",
          },
          subtext: "副标题！！！",
          subtextStyle: {
            color: "red",
          },
          // title离组件容器的一些距离  top left bottom right
          left: 60,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      //设置配置项
      myChart.setOption(options);
    },
  },
  mounted() {
    // console.log(this.$echarts,'999999')
    this.initChart()
    //页面一加载调用接口
    this.$axios({
        url:'/plantingAreaTop'
    })
    .then(res=>{
        console.log(res,'响应');
    })
  },
};
</script>

<style scoped>
.container {
  width: 600px;
  height: 700px;
}
</style>
